<template>
	<view class="evaluates">
		<view class="evaluate_list" v-if="evaList&&evaList.length>0">
			<view class="evaluate_item" v-for="(item,idx) in evaList">
				<view v-if="isDel" class="del">
					 <icon type="clear" size="16" @click="del(item.id)"/>
				</view>
				<view class="up_title">
					<view class="avator">
						<img :src="item.headimgurl" alt="">
					</view>
					<view class="info">
						<view>{{item.nickname}}</view>
						<view class="stars">
							<uni-rate :size="16" :value="item.level" :readonly="true"/>
						</view>
					</view>
					<view class="date">{{item.createtime.substr(0, 10)}}</view>
				</view>
				<view class="content">
					<rich-text :nodes="item.content" class="text"></rich-text>
					<scroll-view scroll-x="true" class="imgs" v-if="item.images.length>0">
						<img v-for="img in item.images" :src="img" alt="" @click="prevImage(idx)">
					</scroll-view>
					<view v-if="item.images.length>=3" class="number">共{{item.images.length}}张</view>
				</view>
			</view>
			<view class="empty_loading">
				<image v-show="isloading" src="/static/business/loading.gif" mode=""></image>
				<text v-show="isempty">没有更多了~</text>
			</view>
		</view>
		<view v-else class="none">暂无评价</view>
	</view>
</template>

<script>
	export default {
		name:"evaluates",
		props:{
			'evaList':{
				type: Array,
				default: [],
			},
			'isloading':{
				type: Boolean,
				default: false,
			},
			'isempty':{
				type: Boolean,
				default: false,
			},
			'isDel':{
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
			}
		},
		methods:{
			prevImage(idx) {
				uni.previewImage({
					urls:  this.evaList[idx].images
				})
			},
			del(id){
				this.$emit('del', id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.evaluates{
		padding: 20rpx 20rpx;
		.none{
			text-align: center;
			color: #666;
			margin-top: 50rpx;
		}
		.evaluate_list{
			.evaluate_item{
				position: relative;
				margin-bottom: 10rpx;
				.up_title{
					display: flex;
					align-items: center;
					margin-bottom: 15rpx;
					.avator{
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 15rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.info{
						flex: 1;
						.stars{
							margin-top: 5rpx;
							display: flex;
							image{
								width: 20rpx;
								height: 20rpx;
								margin-right: 10rpx;
							}
						}
					}
					.date{
						color: #999;
						font-size: 22rpx;
					}
				}
				.content{
					position: relative;
					.text{
						font-size: 28rpx;
						color: #333;
						word-wrap: break-all;
						white-space: pre-line;
					}
					.imgs{
						margin-top: 15rpx;
						display: inline-block;
						white-space: nowrap;
						image{
							width: 232rpx;
							height: 232rpx;
							border-radius: 10rpx;
							margin-right: 7rpx;
						}
					}
					.number{
						position: absolute;
						right: 18rpx;
						bottom: 30rpx;
						background: rgba(0,0,0,.4);
						color: #fff;
						font-size: 20rpx;
						border-radius: 30rpx;
						width: 80rpx;
						height: 30rpx;
						text-align: center;
						line-height: 30rpx;
					}
				}
				.del{
					position: absolute;
					top: -8rpx;
					right: 5rpx;
				}
			}
		}
	}
	.empty_loading {
		padding-top: 20upx;
		text-align: center;
		color: #0066CC;
	}
	
	.empty_loading image {
		height: 60upx;
		width: 60upx;
	}
	.swiper{
		position: fixed;
		background: rgba(0,0,0,.5);
		width: 100%;
		height: 100%;
		top:0;
		left: 0;
		z-index: 999;
		.s_swiper{
			height: 100%;
			.s_swiper_image{
				width: 90%;
				height: 60%;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		}
		.indicator{
			position: absolute;
			bottom: 20%;
			right: 5%;
			background: #fff;
			padding: 5rpx 10rpx;
			border-radius: 8rpx;
		}
	}
</style>